<template>
	<view>
		<u-navbar
			leftText=""
			:titleStyle="{ color: '#000000' }"
			leftIconColor="#000000"
			height="44px"
			:bgColor="bgColor"
			title="我的项目"
			:safeAreaInsetTop="true"
			:autoBack="true"
		>
			<view class="u-nav-slot" slot="right" style="display: flex; align-items: center; gap: 3px">
				<image src="/static/image/5-1.png" style="width: 14px; height: 14px; margin-top: 3px"></image>
				<view @click="read" style="color: #666666; font-size: 14px">全部已读</view>
			</view>
		</u-navbar>
		<!-- #ifdef APP -->
		<u-sticky
			bgColor="transparent"
			style="margin-top: 74px; background: linear-gradient(180deg, #e2e5f3, #e7e9f5)"
			customNavHeight="74"
		>
			<u-tabs
				:current="current"
				lineColor="#364EF6"
				:activeStyle="{ color: ' #000' }"
				:list="list1"
				@click="click"
			></u-tabs>
		</u-sticky>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<u-sticky bgColor="transparent" style="background: linear-gradient(180deg, #e2e5f3, #e7e9f5)">
			<u-tabs
				:current="current"
				lineColor="#364EF6"
				:activeStyle="{ color: ' #000' }"
				:list="list1"
				@click="click"
			></u-tabs>
		</u-sticky>
		<!-- #endif -->
		<view
			class="pading"
			style="background: linear-gradient(180deg, #e2e5f3 0%, #f9f9f9 20%, #f9f9f9); min-height: 100vh"
		>
			<view
				@click="details(it)"
				v-for="(it, i) in listdata"
				:key="i"
				style="
					padding: 15px;
					border-radius: 10px;
					background-color: #fff;
					justify-content: space-between;
					margin-bottom: 15px;
					position: relative;
				"
			>
				<view class="flex">
					<image style="width: 16px; margin-right: 5px" src="/static/img/13.png" mode="widthFix"></image>
					<view style="font-size: 14px; font-weight: bold; color: #333">{{ it.title }}</view>
					<!-- <view style="font-size: 16px;font-weight: 400;color: #1D1F20;">-5月20日结算须知</view> -->
					<view style="flex: 1; font-size: 12px; color: #b8b9b9; margin-top: 5px; text-align: right">
						{{ it.createtime }}
					</view>
				</view>
				<view
					style="
						font-size: 13px;
						color: #666;
						line-height: 20px;
						margin-top: 10px;
						white-space: wrap;
						word-wrap: break-word;
					"
					v-if="it.introduction"
					v-html="it.introduction"
				></view>
				<view style="margin: 10px 0; height: 1px; background: #f7f7f7"></view>
				<view
					style="
						display: flex;
						justify-content: space-between;
						align-item: center;
						font-size: 13px;
						color: #333333;
						border-top: 1p solid #000;
					"
				>
					<view>查看详情</view>
					<u-icon name="arrow-right" size="13"></u-icon>
				</view>
				<!-- 	<view
					v-if="it.is_read == 0"
					style="
						position: absolute;
						right: 0;
						top: 0;
						padding: 4px 10px;
						background-color: #f00;
						border-radius: 0px 10px 0px 10px;
						font-size: 12px;
						color: #fff;
					"
				>
					未读
				</view>
				<view
					v-if="it.is_read == 1"
					style="
						position: absolute;
						right: 0;
						top: 0;
						padding: 4px 10px;
						background-color: #e8e8e8;
						border-radius: 0px 10px 0px 10px;
						font-size: 12px;
						color: #fff;
					"
				>
					已读
				</view> -->
			</view>
		</view>
		<u-loadmore
			v-if="show"
			:status="status"
			:loading-text="loadingText"
			:loadmore-text="loadmoreText"
			:nomore-text="nomoreText"
		/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// bgColor: '#FF3331',
				bgColor: '#E3E6F4',
				current: 0,
				list1: [
					{
						name: '通知公告',
					},
					{
						name: '个人消息',
					},
				],
				page: 1,
				pagenum: 10,
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
				listdata: [],
				dateinfo: [],
				show: false,
			};
		},
		onReachBottom() {
			this.show = true;
			if (this.dateinfo == '') return;
			this.status = 'loading';
			this.page = ++this.page;
			this.notice_list();
		},
		onShow() {
			this.listdata = [];
			this.page = 1;
			setTimeout(() => {
				this.notice_list();
			}, 200);
		},
		onLoad(e) {
			this.current = Number(e.type);
		},
		methods: {
			async notice_list() {
				let res = await this.$http.index.noticeHome({
					type: this.current + 1,
					page: this.page,
					pageNum: this.pagenum,
				});
				if (res.code == 1) {
					this.dateinfo = res.data;
					setTimeout(() => {
						if (this.dateinfo == '') this.status = 'nomore';
						else this.status = 'loading';
					}, 2000);
					this.listdata = [...this.listdata, ...this.dateinfo];
				}
			},
			async read() {
				let res = await this.$http.index.allread({
					type: this.current + 1,
				});
				if (res.code == 1) {
					this.page = 1;
					this.dateinfo = [];
					this.listdata = [];
					this.notice_list();
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg,
					});
				}
			},
			click(e) {
				this.page = 1;
				this.dateinfo = [];
				this.listdata = [];
				this.current = e.index;
				this.notice_list();
			},
			details(it) {
				uni.navigateTo({
					url: '/pages/home/detail?id=' + it.notice_id + '&type=notice',
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.flex {
		display: flex;
		align-items: center;
	}

	/deep/ .uni-scroll-view-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* #ifdef APP */
	.pading {
		padding: 15px;
	}
	/* #endif */
	/* #ifdef H5 */
	.pading {
		padding: 60px 15px 15px;
	}
	/* #endif */
</style>
<style>
	page {
		background-color: #f7f9fa;
	}
</style>